iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

我的菜很有Vue味~系列 第 27

Day27 Vue CLI 介紹

  • 分享至 

  • xImage
  •  

前面講了一對現在怎又多了CLI?
CLI有事要幹嘛的?

在之前我們寫Vue時都是用vue.js和<script>來寫,但是也因為專案越來越大,這種方式已經開始沒法滿足前端的開發人員,所以就開始想辦法讓前端的人能更有效率的開發,最後Vue CLI就誕生了。

CLI最厲害的地方就是它可以讓開發者快速建置一套立即可用得開發環境,同時也可以依開發者需要與其他 Plugin 整合,如Babel、ESLint、SASS ... 等等。

Vue CLI 的安裝

在安裝Vue CLI之前,必須先安裝Node.js,到可以依自己的需求去官網下載版本。

在安裝完後,可以開啟Terminal(或是cmd)輸入以下指令:

下在完後可以在終端機輸入 vue -V來看看自己有沒有下載對版本。
接下來在輸入vue cretae [專案名稱]後會看到這畫面。
選擇你要的版本。

如過你是選Manually select features的話可以看到此畫面。

這常是不太會需要改動到其他東西,所以一直Enter就可以了。
這裡就找指令輸入就行了
cd test01
npm reun serve


再到瀏覽器輸入http://localhost:8080/後呈現畫面如下。

除了用以上方式另一種方式是在終端機去輸入vue ui後會到這畫面,然又就自己去新增專題就差不多了,以畫面就好解決。

今天就先到這了,明天見~


上一篇
Day26 Vue 元件與客製事件
下一篇
Day28 Vue CLI建立的專案結構
系列文
我的菜很有Vue味~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言